<div nz-row [nzGutter]="20" class="my-card">
  <div nz-col nzXs="24" nzSm="24" nzMd="12" nzLg="12" nzXl="12">
    <nz-card [nzBordered]="false" nzTitle="基本运营情况" [nzSize]="'small'" [nzExtra]="extraOperate"
             [nzBodyStyle]="{paddingBottom:0}">
      <div nz-row [nzGutter]="16">
<!--        <div nz-col [nzSpan]="8" nzXs="24" nzSm="24" nzMd="12" nzLg="8" nzXl="8">-->
<!--          <div class="inner-box">-->
<!--            <div><i nz-icon>-->
<!--              <img src="assets/img/icon-1.png" alt="">-->
<!--            </i></div>-->
<!--            <div class="data">-->
<!--              <div class="value">{{stateAgency['userNewNum'] | emptyCheckPipe:1}}</div>-->
<!--              <div class="title">{{dateName}}新增运营商</div>-->
<!--            </div>-->
<!--          </div>-->
<!--        </div>-->
<!--        <div nz-col [nzSpan]="8" nzXs="24" nzSm="24" nzMd="12" nzLg="8" nzXl="8">-->
<!--          <div class="inner-box">-->
<!--            <div><img src="assets/img/icon-2.png" alt=""></div>-->
<!--            <div class="data">-->
<!--              <div class="value">{{stateAgency['storeNewNum'] | emptyCheckPipe:1}}</div>-->
<!--              <div class="title">{{dateName}}新增场地</div>-->
<!--            </div>-->
<!--          </div>-->
<!--        </div>-->
        <div nz-col [nzSpan]="8" nzXs="24" nzSm="24" nzMd="12" nzLg="8" nzXl="8">
          <div class="inner-box">
            <div><img src="assets/img/icon-3.png" alt=""></div>
            <div class="data">
              <div class="value">{{stateAgency['deviceNewNum'] | emptyCheckPipe:1}}</div>
              <div class="title">{{dateName}}新增设备</div>
            </div>
          </div>
        </div>
        <div nz-col [nzSpan]="8" nzXs="24" nzSm="24" nzMd="12" nzLg="8" nzXl="8">
          <div class="inner-box">
            <div>
              <img src="assets/img/icon-4.png" alt="">
            </div>
            <div class="data">
              <div class="value">{{stateAgency['memberNewNum'] | emptyCheckPipe:1}}</div>
              <div class="title">{{dateName}}新增会员</div>
            </div>
          </div>
        </div>
        <div nz-col [nzSpan]="8" nzXs="24" nzSm="24" nzMd="12" nzLg="8" nzXl="8">
          <div class="inner-box">
            <div><img src="assets/img/icon-5.png" alt=""></div>
            <div class="data">
              <div class="value">{{stateAgency['memberConsumeNum'] | emptyCheckPipe:1}}</div>
              <div class="title">{{dateName}}消费会员</div>
            </div>
          </div>
        </div>
        <div nz-col [nzSpan]="8" nzXs="24" nzSm="24" nzMd="12" nzLg="8" nzXl="8">
          <div class="inner-box">
            <div><img src="assets/img/icon-6.png" alt=""></div>
            <div class="data">
              <div class="value">{{stateAgency['agencyNoTrade'] | emptyCheckPipe:1}}</div>
              <div class="title">{{dateName}}无交易合作伙伴</div>
            </div>
          </div>
        </div>
        <div nz-col [nzSpan]="8" nzXs="24" nzSm="24" nzMd="12" nzLg="8" nzXl="8">
          <div class="inner-box">
            <div>
              <div><img src="assets/img/icon-7.png" alt=""></div>
            </div>
            <div class="data">
              <div class="value">{{stateAgency['userNoTrade'] | emptyCheckPipe:1}}</div>
              <div class="title">{{dateName}}无交易运营</div>
            </div>
          </div>
        </div>
        <div nz-col [nzSpan]="8" nzXs="24" nzSm="24" nzMd="12" nzLg="8" nzXl="8">
          <div class="inner-box">
            <div><img src="assets/img/icon-8.png" alt=""></div>
            <div class="data">
              <div class="value">{{stateAgency['storeNoTrade'] | emptyCheckPipe:1}}</div>
              <div class="title">{{dateName}}无交易场地</div>
            </div>
          </div>
        </div>
        <div nz-col [nzSpan]="8" nzXs="24" nzSm="24" nzMd="12" nzLg="8" nzXl="8">
          <div class="inner-box">
            <div><img src="assets/img/icon-9.png" alt=""></div>
            <div class="data">
              <div class="value">{{stateAgency['deviceNoTrade'] | emptyCheckPipe:1}}</div>
              <div class="title">{{dateName}}无交易设备</div>
            </div>
          </div>
        </div>

      </div>

    </nz-card>

    <ng-template #extraOperate>
      <nz-radio-group [(ngModel)]="type" (ngModelChange)="operationChange()">
        <label nz-radio-button nzValue="2" [nzDisabled] = "disClick">昨天</label>
        <label nz-radio-button nzValue="1" [nzDisabled] = "disClick">本月</label>
        <label nz-radio-button nzValue="-1" [nzDisabled] = "disClick">上月</label>
      </nz-radio-group>
    </ng-template>

  </div>
  <div nz-col nzXs="24" nzSm="24" nzMd="12" nzLg="12" nzXl="12" [ngClass]="isMobile?'margin-top-20':''">
    <nz-card [nzBordered]="false" nzTitle="各类设备投币占比" [nzSize]="'small'" [nzExtra]="extraRatio">
      <div id="ratio" #ratio></div>
      <div *ngIf="!deviceIsNull">
        <span style="color: #999999">
          暂无设备
        </span>
      </div>
    </nz-card>
    <ng-template #extraRatio>
      <nz-radio-group [(ngModel)]="month" (ngModelChange)="radioChange()">
        <label nz-radio-button nzValue="1">本月</label>
        <label nz-radio-button nzValue="-1">上月</label>
      </nz-radio-group>
    </ng-template>
  </div>
</div>
